import {defineComponent, ref, onMounted, onUnmounted} from "vue";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import { useRouter } from 'vue-router'; // 导入路由
import { ElButton, ElIcon } from "element-plus";
import { Check } from '@element-plus/icons-vue';
export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const router = useRouter(); // 获取路由实例
        // 倒计时秒数
        const countdown = ref(3);
        let timer: number; // 定时器
        const time = ()=>{
            if (countdown.value>0){
                countdown.value--;
            }else {
                clearInterval(timer); // 清除定时器
                router.push({
                    path: '/HomePage',
                });
            }
        }
        onMounted(() => {
             timer = window.setInterval(time, 1000);
        });
        onUnmounted(() => {
            clearInterval(timer); // 清除定时器
        });

        return () => (
            <div class={Style.top}>
                <UserInfo time={countdown.value}></UserInfo>
                <Steps></Steps>
                <div class={Style.container_mar} >
                    <div class={Style.top_div} >
                        <div class={Style.successIconWrap}>
                            <ElIcon class={Style.successIcon}>
                                <Check/>
                            </ElIcon>
                        </div>
                        <div class={Style.fontStyle1}>
                            缴费成功，即将返回首页。
                        </div>
                        <div class={Style.fontStyle2}>
                            将在<span style={{ color: "#3E77F8" }}>{countdown.value} 秒</span> 后关闭页面！
                        </div>
                    </div>
                </div>
            </div>
        );
    }
})
